<template>
  <div>
    <myheader/>

    <van-form @submit="reg" style="width: 400px">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="form.mobile"
        type="mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <drag-verify
        :width="width"
        :height="height"
        :text="text"
        :circle="false"
        ref="Verify"
        :success-text="successText"
      >
      </drag-verify>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import myheader from "../components/myheader";
import dragVerify from 'vue-drag-verify'

export default {
  name: "reg",
  data() {
    return {
      form: {},

      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,

    }
  },
  methods: {
    reg() {
      if (this.$refs.Verify.isPassing) {
        this.$axios.post('users/reg', this.form).then(res => {

        })
      }
    }
  },
  components: {
    'myheader': myheader,
    'dragVerify': dragVerify
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
